<template>
  <div class="hello">
    <x-header title="需求xxx"></x-header>
    <tab>
      <tab-item selected @on-item-click="onItemClick">详情</tab-item>
      <tab-item @on-item-click="onItemClick">简单选人</tab-item>
    </tab>
    <div v-if="tabIndex == 0">
      <group label-width="4em" label-margin-right="1em" label-align="right">
        <cell
          title="需求标题"
          is-link
          :border-intent="false"
          :arrow-direction="showContent004 ? 'up' : 'down'"
          @click.native="showContent004 = !showContent004"
        ></cell>
        <p class="slide" :class="showContent004 ? 'animate' : ''">
          {{ reqForm.title }}
        </p>
      </group>

      <group>
        <cell
          title="审批人"
          :value="reqForm.signManName"
          @click.native="onClick"
        ></cell>
      </group>

      <div v-transfer-dom class="my-pop">
        <popup v-model="popup" position="bottom" max-height="80%">
          <ul class="org-ui">
            <li class="org-li vux-1px-b" v-for="org in orgs" :key="org.orgId">
              <div class="org-item">
                <p class="org-name" @click="selectPerson(org.orgId)">
                  {{ org.orgName }}
                </p>
                <p
                  class="org-sub"
                  @click="nextOrg(org.orgId)"
                  v-show="org.subOrg && org.subOrg.length > 0"
                >
                  >
                </p>
              </div>
              <div
                class="org-person-list"
                v-if="org.showPerson && org.staff && org.staff.length > 0"
              >
                <group>
                  <radio
                    :options="org.staff"
                    @on-change="change"
                    v-model="reqForm.signMan"
                  ></radio>
                </group>
              </div>
            </li>
          </ul>
          <div style="padding: 15px">
            <x-button @click.native="popup = false" plain type="primary">
              Close Me
            </x-button>
          </div>
        </popup>
      </div>
    </div>
    <div v-if="tabIndex == 1">
      <x-button type="primary" @click.native="showPopup" class="btn"
        >primary</x-button
      >
      <group>
        <cell
          title="处理人"
          @click.native="onClickPerson"
          :value="selectedPersons"
        ></cell>
      </group>
      <div v-transfer-dom>
        <popup v-model="showPerson" max-height="80%">
          <popup-header
            right-text="确定"
            title=""
            :show-bottom-border="false"
            @on-click-right="clickRightPserson"
          ></popup-header>
          <checklist
            title=""
            :options="inlineDescList"
            v-model="inlineDescListValue"
            @on-change="changePerson"
          ></checklist>
        </popup>
      </div>

      <div v-transfer-dom>
        <popup v-model="show" max-height="80%">
          <!-- group already has a top border, so we need to hide header's bottom border-->
          <popup-header
            left-text="取消"
            right-text="确定"
            title=""
            :show-bottom-border="false"
            @on-click-left="clickLeft"
            @on-click-right="clickRight"
          ></popup-header>
          <group gutter="0">
            <radio :options="options" v-model="selectedValue">
              <template slot-scope="props" slot="each-item">
                <p style="">
                  {{ props.label }}
                </p>
              </template>
            </radio>
          </group>
        </popup>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Tab,
  TabItem,
  XHeader,
  Group,
  Cell,
  CellBox,
  Radio,
  XSwitch,
  TransferDom,
  Popup,
  XButton,
  PopupHeader,
  Checklist,
} from "vux";
export default {
  directives: {
    TransferDom,
  },
  components: {
    Tab,
    TabItem,
    XHeader,
    Group,
    Cell,
    CellBox,
    Radio,
    XSwitch,
    Popup,
    XButton,
    PopupHeader,
    Checklist,
  },
  name: "HelloWorld",
  data() {
    return {
      selectedValue: "",
      options: [
        { key: 1, value: "同意" },
        { key: 2, value: "不同意" },
        { key: 3, value: "去你妈的" },
      ],
      show: false,
      showPerson: false,
      showOrg: false,
      msg: "Welcome to Your Vue.js App",
      tabIndex: 0,
      reqForm: {
        title:
          "1111111111111111111111111111111111中信需求22222222222222222222222222222",
        id: "RE_123",
        signMan: "",
        signManName: "",
      },
      popup: false,
      showContent004: false,
      orgSelected: [],
      orgCitic: {
        orgId: 1,
        orgNmae: "中信总行",
        subOrg: [
          {
            orgId: 11,
            orgName: "北京市分行",
            subOrg: [
              {
                orgId: 111,
                orgName: "西城支行",
                staff: [
                  {
                    key: 100,
                    value: "麻槐德0",
                  },
                  {
                    key: 101,
                    value: "麻槐德1",
                  },
                  {
                    key: 102,
                    value: "麻槐德2",
                  },
                  {
                    key: 103,
                    value: "麻槐德3",
                  },
                  {
                    key: 104,
                    value: "麻槐德4",
                  },
                  {
                    key: 105,
                    value: "麻槐德5",
                  },
                  {
                    key: 106,
                    value: "麻槐德6",
                  },
                  {
                    key: 107,
                    value: "麻槐德7",
                  },

                  {
                    key: 108,
                    value: "麻槐德8",
                  },
                  {
                    key: 109,
                    value: "麻槐德9",
                  },
                  {
                    key: 110,
                    value: "麻槐德10",
                  },
                  {
                    key: 111,
                    value: "麻槐德11",
                  },
                ],
                subOrg: [
                  {
                    orgId: 1111,
                    orgName: "广安门营业厅",
                    staff: [
                      {
                        key: 1100,
                        value: "赵恒晨0",
                      },
                      {
                        key: 1101,
                        value: "赵恒晨1",
                      },
                      {
                        key: 1102,
                        value: "赵恒晨2",
                      },
                      {
                        key: 1103,
                        value: "赵恒晨3",
                      },
                      {
                        key: 1104,
                        value: "赵恒晨4",
                      },
                      {
                        key: 1105,
                        value: "赵恒晨5",
                      },
                      {
                        key: 1106,
                        value: "赵恒晨6",
                      },
                      {
                        key: 1107,
                        value: "赵恒晨7",
                      },

                      {
                        key: 1108,
                        value: "赵恒晨8",
                      },
                      {
                        key: 1109,
                        value: "赵恒晨9",
                      },
                      {
                        key: 1110,
                        value: "赵恒晨10",
                      },
                      {
                        key: 1111,
                        value: "赵恒晨11",
                      },
                    ],
                  },
                  {
                    orgId: 1112,
                    orgName: "长椿街营业厅",
                  },
                  {
                    orgId: 1113,
                    orgName: "宣武门营业厅",
                  },
                ],
              },
              {
                orgId: 112,
                orgName: "东城支行",
              },
              {
                orgId: 113,
                orgName: "朝阳支行",
              },
              {
                orgId: 114,
                orgName: "海淀支行",
              },
              {
                orgId: 115,
                orgName: "石景山支行",
              },
              {
                orgId: 116,
                orgName: "通州支行",
              },
            ],
          },
          {
            orgId: 12,
            orgName: "天津市分行",
          },
          {
            orgId: 13,
            orgName: "上海市分行",
          },
          {
            orgId: 14,
            orgName: "重庆市分行",
          },
          {
            orgId: 15,
            orgName: "深圳市分行",
          },
          {
            orgId: 16,
            orgName: "广州市分行",
          },
        ],
      },
      orgs: [],
      orgs1: [
        {
          orgId: 1,
          orgName: "机构1",
          staff: [
            {
              key: "001",
              value: "麻槐德",
            },
            {
              key: "002",
              value: "赵恒晨",
            },
          ],
          subOrg: [
            {
              orgId: 11,
              orgName: "子机构1",
              staff: [
                {
                  key: "003",
                  value: "王天龙",
                },
                {
                  key: "004",
                  value: "吴泽妃",
                },
              ],
            },
          ],
        },
        {
          orgId: 2,
          orgName: "机构2",
          subOrg: [{ orgId: 21, orgName: "子机构2" }],
          staff: [
            {
              key: "005",
              value: "袁鑫",
            },
            {
              key: "006",
              value: "田浩",
            },
          ],
        },
        {
          orgId: 3,
          orgName: "机构3",
          subOrg: [{ orgId: 31, orgName: "子机构3" }],
          staff: [
            {
              key: "007",
              value: "赵维东",
            },
            {
              key: "008",
              value: "王鹏飞",
            },
          ],
        },
        { orgId: 4, orgName: "机构4" },
        {
          orgId: 5,
          orgName: "机构5",
          subOrg: [{ orgId: 51, orgName: "子机构5" }],
        },
        {
          orgId: 6,
          orgName: "机构6",
          subOrg: [{ orgId: 61, orgName: "子机构6" }],
        },
        {
          orgId: 7,
          orgName: "机构7",
          subOrg: [{ orgId: 71, orgName: "子机构7" }],
        },
        {
          orgId: 8,
          orgName: "机构8",
          subOrg: [{ orgId: 81, orgName: "子机构8" }],
        },
        {
          orgId: 9,
          orgName: "机构9",
          subOrg: [{ orgId: 91, orgName: "子机构9" }],
        },
        {
          orgId: 10,
          orgName: "机构10",
          subOrg: [{ orgId: 101, orgName: "子机构10" }],
        },
        {
          orgId: 11,
          orgName: "机构11",
          subOrg: [{ orgId: 111, orgName: "子机构11" }],
        },
        {
          orgId: 12,
          orgName: "机构12",
          subOrg: [{ orgId: 121, orgName: "子机构12" }],
        },
        {
          orgId: 13,
          orgName: "机构13",
          subOrg: [{ orgId: 131, orgName: "子机构13" }],
        },
        {
          orgId: 14,
          orgName: "机构14",
          subOrg: [{ orgId: 141, orgName: "子机构14" }],
        },
        {
          orgId: 15,
          orgName: "机构15",
          subOrg: [{ orgId: 151, orgName: "子机构15" }],
        },
        {
          orgId: 16,
          orgName: "机构16",
          subOrg: [{ orgId: 161, orgName: "子机构16" }],
        },
        {
          orgId: 17,
          orgName: "机构17",
          subOrg: [{ orgId: 171, orgName: "子机构17" }],
        },
        {
          orgId: 18,
          orgName: "机构18",
          subOrg: [{ orgId: 181, orgName: "子机构18" }],
        },
      ],
      inlineDescListValue: [],
      inlineDescList: [
        { key: "1", value: "张三丰" },
        { key: "2", value: "欧阳忠诚" },
        { key: "3", value: "Camel is best" },
        { key: "4", value: "mahuaide" },
        { key: "5", value: "mahuaide" },
        { key: "6", value: "mahuaid" },
        { key: "7", value: "mahuaide" },
        { key: "8", value: "mahuaide" },
        { key: "9", value: "mahuaide" },
        { key: "10", value: "mahuaide" },
        { key: "11", value: "mahuaide" },
        { key: "12", value: "mahuaide" },
        { key: "14", value: "mahuaide " },
        { key: "15", value: "mahuaide " },
        { key: "16", value: "mahuaide " },
        { key: "17", value: "mahuaide " },
        { key: "18", value: "mahuaide " },
      ],
      personList: [],
      orgPerson: [],
    };
  },
  computed: {
    showPersonName() {
      let personName = "";
    },
    selectedPersons() {
      if (this.inlineDescListValue.length == 0) {
        return "请选择";
      } else {
        let names = [];
        this.inlineDescList.forEach((item) => {
          if (this.inlineDescListValue.includes(item.key)) {
            names.push(item.value);
          }
        });
        if (names.length > 2) {
          return names.slice(0, 2).join(",") + "...";
        } else {
          return names.join(",");
        }
      }
    },
    selectedPersonsOrg() {
      if (this.orgPerson.length == 0) {
        return "请选择";
      } else {
        let names = [];
        this.personList.forEach((item) => {
          if (this.orgPerson.includes(item.key)) {
            names.push(item.value);
          }
        });
        if (names.length > 2) {
          return names.slice(0, 2).join(",") + "...";
        } else {
          return names.join(",");
        }
      }
    },
  },
  methods: {
    onClickOrg() {
      this.showOrg = true;
    },
    clickRightOrg() {},
    changeOrgPerson() {},

    changePerson() {},
    onClickPerson() {
      console.log(1);
      this.showPerson = true;
    },
    clickLeftPserson() {
      console.log(2);
      this.showPerson = false;
    },
    clickRightPserson() {
      this.showPerson = false;
    },

    showPopup() {
      this.show = true;
    },
    clickLeft() {
      this.show = false;
    },
    clickRight() {
      console.log(this.selectedValue);
      this.show = false;
    },
    onItemClick(index) {
      this.tabIndex = index;
    },
    onClick() {
      this.popup = !this.popup;
      this.orgs = Object.assign(this.orgs1);
    },
    nextOrg(orgId) {
      console.log("org");
      this.findSubOrg(this.orgs, orgId);
    },
    selectPerson(orgId) {
      console.log("person");
      this.showPersonByOrgId(this.orgs, orgId);
    },
    showPersonByOrgId(list, orgId) {
      list.forEach((org) => {
        this.$set(org, "showPerson", false);
        if (org.orgId == orgId) {
          this.$set(org, "showPerson", true);
        } else if (org.subOrg && org.subOrg.length > 0) {
          this.showPersonByOrgId(org.subOrg, orgId);
        }
      });
    },

    findSubOrg(list, orgId) {
      list.forEach((org) => {
        if (org.orgId == orgId) {
          this.orgs = org.subOrg;
        } else if (org.subOrg && org.subOrg.length > 0) {
          this.showPersonByOrgId(org.subOrg, orgId);
        }
      });
    },
    change(value, label) {
      this.reqForm.signManName = label;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@rem: 750px / 16rem;
.hello {
  .header {
    width: 100%;
    height: 80 / @rem;
    background-color: #fff;

    .logo {
      width: 100 / @rem;
      height: 100%;
    }
    .title {
      width: 650 / @rem;
      height: 100%;
    }
  }
}
.slide {
  padding: 0 15px;
  overflow: hidden;
  font-size: 14px;
  color: gray;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
}
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
.btn {
  position: fixed;
  bottom: 10px;
}
</style>
<style lang="less">
.my-pop {
  .org-ui {
    .org-li {
      padding: 0 5px;
      .org-item {
        height: 40px;
        line-height: 40px;
        display: flex;
        .org-name {
          display: inline-block;
          flex: 9;
        }
        .org-sub {
          display: inline-block;
          text-align: center;
          flex: 1;
        }
      }
      .org-person-list {
        box-sizing: border-box;
        // background-color: #ddd;
        padding: 0 0 20px 0;
      }
    }
  }
}
</style>>
